<template>
	<div class="a-el-form-rex" :style="{ margin, padding, gridGap: gap }">
		<div class="whole" :style="getTypeHeight">
			<AElForm ref="AElForm" :data="data" :rows="rows" @gainLabelLineHeight="gainLabelLineHeight" v-bind="$attrs"
				v-on="$listeners" />
		</div>
		<div class="btn" v-if="gainFormLine > 1">
			<el-button type="text" @click="checkoutType"> <i :class="`iconfont el-icon-arrow-left ${typeToIcon}`" /> {{
				typeToText }}</el-button>
		</div>
	</div>
</template>

<script>
export default {
	name: 'AElFormRex',
	props: {
		data: { type: Object, default: () => ({}) }, // 得到表单数据
		rows: { type: Number, default: 4 }, // 得到表单数据
		line: { type: Number, default: 0 }, // 传递一个数字，表示这个表单有多少行
		margin: { type: String, default: null }, // 外边距
		padding: { type: String, default: null }, // 内边距
		gap: { type: String, default: "10px" }
	},
	data() {
		return {
			height: 0, // 一行的高度
			type: "unfold",  // packUp 收起  unfold 展开
		}
	},
	computed: {
		/**
		 * type转为文字
		 */
		typeToText() {
			switch (this.type) {
				case "packUp": return "收起";
				case "unfold": return "展开";
			}
		},
		/**
		 * type转为icon
		 */
		typeToIcon() {
			switch (this.type) {
				case "packUp": return "icon-down";
				case "unfold": return "icon-left";
			}
		},
		/**
		 * 计算当前表单有多少行
		 */
		gainFormLine() {
			// 获取实例的props
			let { data = {}, rows = 4, line = 0 } = this;
			let { length = 0 } = Object.keys(data);
			return line || Math.ceil(length / rows);
		},
		/**
		 * 根据type返回高度
		 */
		getTypeHeight() {
			// 获取实例的数据
			let { height = 0 } = this;
			// 需要计算的样式
			let style = {};
			switch (this.type) {
				case "unfold": style = { height: `${height}px` }; break;
				case "packUp": style = { height: `${height * this.gainFormLine}px` }; break;
			};
			return style;
		}
	},
	methods: {
		/**
		 * 切换状态
		 */
		checkoutType() {
			switch (this.type) {
				case "packUp": return this.type = "unfold";
				case "unfold": return this.type = "packUp";
			};
		},
		/**
		 * 获取表单一行的高度
		 */
		gainLabelLineHeight() {
			let dom = document.getElementsByClassName('el-form-col');
			let style = window.getComputedStyle(dom[0]);
			this.height = parseInt(style.height);
		}
	}
}
</script>

<style lang="scss" scoped>
@import url('./index.scss');
</style>
